<template>
  <el-select
    multiple
    collapse-tags
    v-model="value"
    @change="changeSelectApp(value, options)"
    @remove-tag="removeTagApp(value, options)"
    placeholder="请选择"
    style="width:100%"
  >
    <el-option
      label="全部"
      value="allSelect"
      @click.native="doSelecAllApp(value, options)"
    ></el-option>
    <el-option
      v-for="(item, index) in options"
      :label="item.label"
      :value="item.value"
      :key="index"
    />
  </el-select>
</template>
<script>
export default {
  name: "FormSelectAll",
  props: {
    value: {
      type: Array,
      default: []
    },
    options: {
      type: Array,
      default: []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ""
    }
  },
  watch: {
    options(n) {
      if (n.length) {
        this.doSelecAll2(["allSelect"], this.options);
      }
    }
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    dailiChange(e) {
      this.$emit("input", e);
      //   this.$emit("input", this.options);
    },
    /** 切换全选状态 */
    changeSelect2(valArr, options) {
      if (!valArr.includes("allSelect") && valArr.length === options.length) {
        valArr.unshift("allSelect");
      } else if (
        valArr.includes("allSelect") &&
        valArr.length - 1 < options.length
      ) {
        valArr = valArr.filter(item => {
          return item !== "allSelect";
        });
      }
      this.$emit("input", valArr);
      //   return valArr;
    },
    /** 移除tag */
    removeTag(valArr, options) {
      // console.log(valArr, '移除')
      // if (valArr === 'allSelect') {
      //   valArr = []
      // }
      // return valArr
    },
    /** 具体方法 */
    /** 获取所有select的全选 */
    getAllSelect() {
      //   this.doSelecAllApp(this.ruleForm.apply2, this.appOptions);
    },
    changeSelectApp(valArr, options) {
      //   this.$emit("input", valArr);
      this.changeSelect2(valArr, options);
    },
    doSelecAllApp(valArr, options) {
      //   this.$emit("input", valArr);
      this.doSelecAll2(valArr, options);
    },
    doSelecAll2(valArr, options) {
      let data = [];
      if (!valArr.includes("allSelect") && valArr.length === options.length) {
        valArr.unshift("allSelect");
      } else {
        delete valArr.splice(valArr.indexOf("allSelect"), 1);
        if (valArr.length == options.length) {
          data = [];
        } else {
          data = [];
          options.forEach(e => {
            data.push(e.value);
          });
        }
      }
      this.changeSelect2(data, options);
      //   return valArr;
    },
    removeTagApp(valArr, options) {
      this.$emit("input", valArr);
    }
  }
};
</script>
